<template>
  <div style="margin: 10px 10px" v-on:click="handleClick" class="good-item">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span v-if="goodData.selfWork === 1" class="self-work">自营</span>
        <span class="good-name">{{ goodData.name }}</span>
      </div>
      <el-image
        style="width: 300px; height: 300px"
        :src="goodData.pic"
        fit="fill"
      ></el-image>
      <div style="width: 100%">
        <div style="display: flex; justify-content: space-between; align-items: center">
          <span style="color: #ff6a00">¥{{ goodData.price }} </span>
          <el-button
            icon="el-icon-shopping-cart-2"
            round
            style="margin-right: 5px"
            @click="addToCart"
          ></el-button>
        </div>
      </div>
    </el-card>
  </div>
</template>
<script>
const Good = {
  id: Number,
  name: String,
  price: Number,
  pic: String,
  selfWork: Number,
};
import { addCartReq } from "@/api/cart";
import { mapState,mapActions} from "vuex";
export default {
  name: "GoodItem",
  props: {
    goodData: Good,
  },
  data() {
    return {};
  },
  methods: {
    addToCart() {
      addCartReq(this.goodData.id)
        .then(() => {
          this.$message("添加购物车成功");
        })
        .catch();
    },
    handleClick() {
      this.$store.commit("good/addSelectedGoods",this.goodData)
      this.$router.push("/detail");
    },
  },
};
</script>
<style>
.text {
  font-size: 14px;
}

el-image {
  width: 100%;
  height: 0;
  padding-bottom: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.item {
  margin-bottom: 18px;
}

.clearfix {
  font-weight: bold;
  color: #333;
  margin-bottom: 10px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both;
}

.box-card {
  width: 350px;
  background-color: #f5f5f5;
  border: 1px solid #ebebeb;
  border-radius: 4px;
  padding: 10px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.good-name {
  font-size: 16px;
  font-weight: bold;
  color: #333;
}

.self-work {
  display: inline-block;
  padding: 2px 6px;
  font-size: 12px;
  background-color: #e4393c;
  color: #fff;
  border-radius: 2px;
  margin-right: 6px;
}

.good-item {
  /* ... */
  transition: transform 0.3s ease;
}

.good-item:hover {
  transform: scale(1.1);
}
</style>
